<template>
  <!-- 订单费用数据 -->
  <div class="order-fee-data">
    <div class="order-fee-data__header flex justify-between items-center mb-2">
      <div class="font-medium text-base nav-title">
        <span class="title">费用汇总</span>
        <span class="sub-title">根据下方订单筛选条件汇总数据，不受账单筛选条件的影响</span>
      </div>
      <a-button type="primary" size="small" @click="handleFoldAll">
        {{ isFoldAll ? '收起所有' : '展开所有' }}
        <icon-up v-if="isFoldAll" />
        <icon-down v-else />
      </a-button>
    </div>
    <template v-if="isFoldAll">
      <div class="flex order-fee-data__bg mb-4">
        <div class="w-1/6 flex flex-col justify-center items-center py-4">
          <span class="font-medium">订单总额</span>
          <span class="text-blue-500 font-semibold">{{ unitVal(details?.firstLine?.orderTotalAmount) }}</span>
        </div>
        <a-divider direction="vertical" margin="0" />
        <div class="w-1/6 flex flex-col justify-center items-center py-4">
          <span class="font-medium">OTA对账总额</span>
          <span class="text-blue-500 font-semibold">{{ unitVal(details?.firstLine?.otaStatementTotalAmount) }}</span>
        </div>
        <a-divider direction="vertical" margin="0" />
        <div class="w-1/6 flex flex-col justify-center items-center py-4">
          <span class="font-medium">佣金总额</span>
          <span class="text-blue-500 font-semibold">{{ unitVal(details?.firstLine?.commissionAmountTotal) }}</span>
        </div>
        <a-divider direction="vertical" :margin="7.5" />
        <div class="w-1/6 flex flex-col justify-center items-center py-4">
          <span class="font-medium">净收入</span>
          <span class="text-blue-500 font-semibold">{{ unitVal(details?.firstLine?.orderRevenueAmountTotal) }}</span>
        </div>
        <a-divider direction="vertical" margin="0" />
        <div class="w-1/6 flex flex-col justify-center items-center py-4">
          <span class="font-medium">已结算总额</span>
          <span class="text-blue-500 font-semibold">{{ unitVal(details?.firstLine?.statementTotalAmount) }}</span>
        </div>
        <a-divider direction="vertical" margin="0" />
        <div class="w-1/6 flex flex-col justify-center items-center py-4">
          <span class="font-medium">待结算总额</span>
          <span class="text-blue-500 font-semibold">{{ unitVal(details?.firstLine?.waitStatementTotalAmount) }}</span>
        </div>
      </div>

      <!-- 订单费用数据 start -->
      <div class="mb-4">
        <div class="order-fee-data__header flex justify-between items-center mb-2">
          <span class="font-medium text-base">订单费用数据</span>
        </div>
        <div class="flex">
          <div class="w-1/2 flex order-fee-data__bg mr-4">
            <div class="w-2/6 order-total flex flex-col justify-center items-center text-white py-2">
              <div class="order-total-trangle__right"></div>
              <span class="font-medium">收款总额</span>
              <span class="font-semibold">{{ unitVal(details.receivedAmountTotal) }}</span>
              <div class="flex flex-col justify-center items-center mt-2 text-xs">
                <span>线上：{{ unitVal(details.receivedAmountOnlineTotal) }}</span>
                <span>线下：{{ unitVal(details.receivedAmountOfflineTotal) }}</span>
              </div>
            </div>

            <div class="w-2/6 flex flex-col justify-center items-center py-4">
              <span class="font-medium">已结算</span>
              <span class="text-blue-500 font-semibold">{{ unitVal(details.receivedStatementAmountTotal) }}</span>
              <div class="flex flex-col justify-center items-center mt-2 text-xs">
                <span>线上：{{ unitVal(details.receivedStatementAmountOnlineTotal) }}</span>
                <span>线下：{{ unitVal(details.receivedStatementAmountOfflineTotal) }}</span>
              </div>
            </div>
            <a-divider direction="vertical" margin="0" />
            <div class="w-2/6 flex flex-col justify-center items-center py-4">
              <span class="font-medium">待结算</span>
              <span class="text-blue-500 font-semibold">{{ unitVal(details.receivedWaitStatementAmountTotal) }}</span>
              <div class="flex flex-col justify-center items-center mt-2 text-xs">
                <span>线上：{{ unitVal(details.receivedWaitStatementAmountOnlineTotal) }}</span>
                <span>线下：{{ unitVal(details.receivedWaitStatementAmountOfflineTotal) }}</span>
              </div>
            </div>
          </div>

          <div class="w-1/2 flex order-fee-data__bg">
            <div class="w-2/6 order-total flex flex-col justify-center items-center text-white py-2">
              <div class="order-total-trangle__right"></div>
              <span class="font-medium">付款总额</span>
              <span class="font-semibold">{{ unitVal(details.payAmountTotal) }}</span>
              <div class="flex flex-col justify-center items-center mt-2 text-xs">
                <span>线上：{{ unitVal(details.payAmountOnlineTotal) }}</span>
                <span>线下：{{ unitVal(details.payAmountOfflineTotal) }}</span>
              </div>
            </div>

            <div class="w-2/6 flex flex-col justify-center items-center py-4">
              <span class="font-medium">已结算</span>
              <span class="text-blue-500 font-semibold">{{ unitVal(details.payStatementAmountTotal) }}</span>
              <div class="flex flex-col justify-center items-center mt-2 text-xs">
                <span>线上：{{ unitVal(details.payStatementAmountOnlineTotal) }}</span>
                <span>线下：{{ unitVal(details.payStatementAmountOfflineTotal) }}</span>
              </div>
            </div>
            <a-divider direction="vertical" margin="0" />
            <div class="w-2/6 flex flex-col justify-center items-center py-4">
              <span class="font-medium">待结算</span>
              <span class="text-blue-500 font-semibold">{{ unitVal(details.payWaitStatementAmountTotal) }}</span>
              <div class="flex flex-col justify-center items-center mt-2 text-xs">
                <span>线上：{{ unitVal(details.payWaitStatementAmountOnlineTotal) }}</span>
                <span>线下：{{ unitVal(details.payWaitStatementAmountOfflineTotal) }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 订单费用数据 end -->

      <!-- 订单对账数据 start -->
      <div class="mb-4">
        <div class="order-fee-data__header flex justify-between items-center mb-2">
          <span class="font-medium text-base">订单对账数据</span>
        </div>
        <div class="flex">
          <div class="w-1/2 flex order-fee-data__bg mr-4">
            <div class="w-2/6 order-total flex flex-col justify-center items-center text-white py-2">
              <div class="order-total-trangle__right"></div>
              <span class="font-medium">待对账总额</span>
              <span class="font-semibold">
                {{
                  unitVal(decimal.add(Math.abs(details.receivedWaitBillAmountTotal || 0), Math.abs(details.payWaitBillAmountTotal || 0)))
                }}
              </span>
              <div class="flex flex-col justify-center items-center mt-2 text-xs">
                <span>
                  线上：
                  {{
                    unitVal(
                      decimal.add(
                        Math.abs(details.receivedWaitBillAmountOnlineTotal || 0),
                        Math.abs(details.payWaitBillAmountOnlineTotal || 0)
                      )
                    )
                  }}
                </span>
                <span>
                  线下：
                  {{
                    unitVal(
                      decimal.add(
                        Math.abs(details.receivedWaitBillAmountOfflineTotal || 0),
                        Math.abs(details.payWaitBillAmountOfflineTotal || 0)
                      )
                    )
                  }}
                </span>
              </div>
            </div>

            <div class="w-2/6 flex flex-col justify-center items-center py-4">
              <span class="font-medium">收款总额</span>
              <span class="text-blue-500 font-semibold">{{ unitVal(details.receivedWaitBillAmountTotal) }}</span>
              <div class="flex flex-col justify-center items-center mt-2 text-xs">
                <span>线上：{{ unitVal(details.receivedWaitBillAmountOnlineTotal) }}</span>
                <span>线下：{{ unitVal(details.receivedWaitBillAmountOfflineTotal) }}</span>
              </div>
            </div>
            <a-divider direction="vertical" margin="0" />
            <div class="w-2/6 flex flex-col justify-center items-center py-4">
              <span class="font-medium">付款总额</span>
              <span class="text-blue-500 font-semibold">{{ unitVal(details.payWaitBillAmountTotal) }}</span>
              <div class="flex flex-col justify-center items-center mt-2 text-xs">
                <span>线上：{{ unitVal(details.payWaitBillAmountOnlineTotal) }}</span>
                <span>线下：{{ unitVal(details.payWaitBillAmountOfflineTotal) }}</span>
              </div>
            </div>
          </div>

          <div class="w-1/2 flex order-fee-data__bg">
            <div class="w-2/6 order-total flex flex-col justify-center items-center text-white py-2">
              <div class="order-total-trangle__right"></div>
              <span class="font-medium">已对账总额</span>
              <span class="font-semibold">
                {{ unitVal(decimal.add(Math.abs(details.receivedBillAmountTotal || 0), Math.abs(details.payBillAmountTotal || 0))) }}
              </span>
              <div class="flex flex-col justify-center items-center mt-2 text-xs">
                <span>
                  线上：
                  {{
                    unitVal(
                      decimal.add(Math.abs(details.receivedBillAmountOnlineTotal || 0), Math.abs(details.payBillAmountOnlineTotal || 0))
                    )
                  }}
                </span>
                <span>
                  线下：
                  {{
                    unitVal(
                      decimal.add(Math.abs(details.receivedBillAmountOfflineTotal || 0), Math.abs(details.payBillAmountOfflineTotal || 0))
                    )
                  }}
                </span>
              </div>
            </div>

            <div class="w-2/6 flex flex-col justify-center items-center py-4">
              <span class="font-medium">收款总额</span>
              <span class="text-blue-500 font-semibold">{{ unitVal(details.receivedBillAmountTotal) }}</span>
              <div class="flex flex-col justify-center items-center mt-2 text-xs">
                <span>线上：{{ unitVal(details.receivedBillAmountOnlineTotal) }}</span>
                <span>线下：{{ unitVal(details.receivedBillAmountOfflineTotal) }}</span>
              </div>
            </div>
            <a-divider direction="vertical" margin="0" />
            <div class="w-2/6 flex flex-col justify-center items-center py-4">
              <span class="font-medium">付款总额</span>
              <span class="text-blue-500 font-semibold">{{ unitVal(details.payBillAmountTotal) }}</span>
              <div class="flex flex-col justify-center items-center mt-2 text-xs">
                <span>线上：{{ unitVal(details.payBillAmountOnlineTotal) }}</span>
                <span>线下：{{ unitVal(details.payBillAmountOfflineTotal) }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 订单对账数据 end -->

      <!-- 收支账号金额汇总 start -->
      <div v-if="details.payTypeInfoList?.length > 0">
        <div class="order-fee-data__header flex justify-between items-center mb-2">
          <span class="font-medium text-base">收支账号金额汇总</span>
        </div>
        <div class="flex flex-wrap">
          <template v-for="(item, index) in details.payTypeInfoList" :key="item.name">
            <div class="w-1/6 flex order-fee-data__bg mb-3">
              <div class="w-full flex flex-col justify-center items-center py-4">
                <span class="font-medium">{{ item.payTypeName }}</span>
                <span>
                  收：
                  <span class="text-blue-500 font-semibold">{{ unitVal(item.receivedAmountTotal) }}</span>
                </span>
                <span>
                  付：
                  <span class="text-blue-500 font-semibold">{{ unitVal(item.payAmountTotal) }}</span>
                </span>
              </div>
              <a-divider direction="vertical" v-if="index != details.payTypeInfoList.length - 1" margin="0" />
            </div>
          </template>
        </div>
      </div>
      <!-- 收支账号金额汇总 end -->

      <a-divider class="mt-2 mb-5" />
    </template>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { unitVal } from '@/utils'
  import decimal from '@/utils/calculation'

  const props = defineProps({
    details: {
      type: Object,
      default: () => ({}),
    },
  })

  const isFoldAll = ref(true)
  const handleFoldAll = () => {
    isFoldAll.value = !isFoldAll.value
  }
</script>

<style scoped lang="less">
  .order-fee-data {
    &__bg {
      background-color: #f7f8fa;
    }
    .nav-title {
      display: flex;
      align-items: center;
      .sub-title {
        font-size: 12px;
        color: #f53f3f;
        margin-left: 12px;
      }
    }

    .order-total {
      position: relative;
      background: #1890ff;
    }

    .order-total-trangle__right {
      position: absolute;
      top: 0;
      right: -10px;
      bottom: 0;
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-bottom: 15px solid transparent;
      border-left: 15px solid #1890ff;
      margin: auto;
    }
  }
</style>
